<template>
    <div class="detailAll">
        <div class="top">
            <div class="topLeft">
                <van-icon class="playIcon" name="play-circle" size="0.5rem" color="#ee0a24" />
                <span @click="playAllMusic">
                    <span :style="{ fontWeight: 600 }">播放全部</span>
                    <span :style="{ fontSize: '0.2rem', color: '#c0c0c0' }">(共{{ store.state.musicListAll.length
                    }})</span>
                </span>
            </div>
            <van-button round color="linear-gradient(to right, #ff6034, #ee0a24)" size="small">
                <van-icon name="plus" />
                收藏（{{ changeCount(+store.state.musicListDetail.subscribedCount) }}）
            </van-button>
        </div>
        <div v-for="(item, i) in store.state.musicListAll" :key="item.id + item.ar[0].id">
            <div class="songItem">
                <div class="itemLeft" @click="playMusic(i)">
                    <span class="count">{{ i + 1 }}</span>
                    <div>
                        <div class="name">
                            {{ item.name }}
                        </div>
                        <div class="auths">
                            <span class="auth" v-for="au in item.ar" :key="au.id">
                                {{ au.name }}
                            </span>
                        </div>
                    </div>
                </div>
                <div>
                    <van-icon v-if="item.mv" name="tv-o" size="0.5rem" @click="showVideoDetail(+item.mv)" />
                    <van-icon :style="{ marginLeft: '0.1rem' }" name="wap-nav" size="0.5rem" />
                </div>
            </div>
        </div>
    </div>
    <van-notify id="van-notify" />
</template>

<script lang='ts' setup>
import store from '@/store';
import { showNotify } from 'vant';
import { } from 'vue'
/* 播放量单位转换 */
const changeCount = (num: number) => {
    if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + '亿'
    } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
    }
}
const playMusic = (index: number) => {
    store.commit('updatePlayList', JSON.parse(JSON.stringify(store.state.musicListAll)))
    store.commit('updateIsPlaying', true)
    if (index !== store.state.playListIndex) {
        store.commit('updatePlayListIndex', index)
    }
}
const playAllMusic = () => {
    playMusic(0)
}
const showVideoDetail = async (id: number) => {
    store.commit('updateVideoDetailShow')
    let res = await store.dispatch('getVideoUrl', id)
    if (res.data.code === 200 && res.data.data.code === 200) {
        store.commit('updateVideoUrl', res.data.data.url)
    } else {
        showNotify({ type: 'danger', message: '获取视频失败' });
    }
}
</script>
 
<style lang = "less" scoped>
.detailAll {
    background-color: #fff;
    border-radius: 0.3rem;

    .top {
        margin: 0.3rem 0.2rem;
        padding-top: 0.2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .topLeft {
            display: flex;
            align-items: center;

            .playIcon {
                min-width: 0.4rem;
                margin-right: 0.1rem;
            }
        }
    }

    .songItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0.3rem 0.2rem 0 0.2rem;

        .itemLeft {
            width: 80%;
            display: flex;
            align-items: center;

            .count {
                min-width: 0.4rem;
                margin: 0.1rem;
                font-size: 0.34rem;
                color: #999;
            }

            .name {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }

            .auths {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                font-size: 0.2rem;
                color: #999;

                .auth {
                    margin-right: 0.2rem;

                }
            }

        }
    }
}
</style>